<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>节点动画</title>
		<style>
			::-webkit-scrollbar {
				display: none;
			}

			html,
			body {
				overflow: hidden;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="mountNode"></div>
		<script>
			/*Fixing iframe window.innerHeight 0 issue in Safari*/
			document.body.clientHeight;
		</script>
		<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.0.2/build/g6.js"></script>
		<script>
			// x1   =   x0   +   r   *   cos(ao   *   3.14   /180   ) 
			// y1   =   y0   +   r   *   sin(ao   *   3.14   /180   ) 
			var Util = G6.Util;
		/**	var data = {
				nodes: [{
						id: 'node1',
						x: 100,
						y: 100,
						r: 10,
						color: 'red',
						shape: 'rect',
						size: [80, 40],
						anchorPoints: [
							[0, 0.5], // 左侧中间
							[1, 0.5] // 右侧中间
						],
						style: {
							stroke: 'green',
							fill: '#1890ff',
							radius: 4
						},
						label: '数据库连接数1',
						textAlign: 'center',
						textBaseline: 'middle',
						labelCfg: {
							autoRotate: true,
							style: {
								fill: '#f0f0f0'
							}
						}
					},
					{
						id: 'node2',
						x: 100,
						y:0,
						shape: 'background-animate',
						color: '#40a9ff',
						shape: 'rect',
						size: [80, 40],
						// anchorPoints: [[0.5, 0], [0.5, 1]],
						style: {
							stroke: 'green',
							fill: '#1890ff',
							radius: 4
						},
						label: '数据库连接数2',
						textAlign: 'center',
						textBaseline: 'middle',
						labelCfg: {
							autoRotate: true,
							style: {
								fill: '#f0f0f0'
							}
						}
					}, {
						id: 'node3',
						x: 0,
						y: 100,
						size: [40, 40],
						shape: 'inner-animate',
						img: '',
						label: '数据库连接数3',
						// labelCfg: {
						//   position: 'right'
						// }
					}, {
						id: 'node4',
						x: 200,
						y: 200,
						shape: 'rect',
						size: [80, 40],
						style: {
							stroke: 'green',
							fill: '#1890ff',
							radius: 4
						},
						label: '数据库连接数4',
						textAlign: 'center',
						textBaseline: 'middle',
						labelCfg: {
							autoRotate: true,
							style: {
								fill: '#f0f0f0'
							}
						}
					},
					{
						id: 'node5',
						x: 200,
						y: 100,
						shape: 'rect',
						label: '数据库连接数5',
						// labelCfg: {
						//   position: 'bottom'
						// }
					},
					{
						id: 'node6',
						x: 200,
						y: 0,
						shape: 'rect',
						label: '数据库连接数6',
						// labelCfg: {
						//   position: 'bottom'
						// }
					}
				],*/
				var nodes = [];
			var edges = [];
			var centerNode = {
				id: 'center',
				x: 400,
				y: 400,
			shape: 'background-animate',
			size:40,
			style: {
				stroke: 'green',
				fill: '#1890ff',
				radius: 4
			},
			label: '数据库连接数1',
			textAlign: 'center',
			textBaseline: 'middle',
			labelCfg: {
				autoRotate: true,
				style: {
					fill: '#f0f0f0'
				}
			}
			};
			nodes.push(centerNode);
			// 顶部添加 4 个节点
			var radians = (Math.PI / 180) * Math.round(360 /5); //弧度
			for (var i = 0; i <5; i++) {
				var id = 'top' + i;
				nodes.push({
					id: id,
					x:400+ 300 * Math.sin(radians * i),
					y:400 + 300 * Math.cos(radians * i),
					shape: 'rect',
				size: [80, 40],
				anchorPoints: [
					[0, 0.5], // 左侧中间
					[1, 0.5] // 右侧中间
				],
				style: {
					stroke: 'green',
					fill: '#1890ff',
					radius: 4
				},
				label: '数据库连接数1',
				textAlign: 'center',
				textBaseline: 'middle',
				labelCfg: {
					autoRotate: true,
					style: {
						fill: '#f0f0f0'
					}
				}
				});
				edges.push({
					source: id,
					target: 'center',
					shape: 'can-running'
				});
			}
					var graph = new G6.Graph({
				container: 'mountNode',
				width: window.innerWidth,
				height: window.innerHeight,
				edgeStyle: {
					default: {
						stroke: '#b5b5b5'
					}
				}
			});
				graph.data({
				nodes: nodes,
				edges: edges
			});
			graph.render();
		</script>
	</body>
</html>
